<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select @change="changeC1" :disabled="disabled" v-model="c1Id" class="m-2" placeholder="请选择">
            <el-option v-for="item in CategoryStore.c1" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="二级分类">
          <el-select @change="changeC2" :disabled="disabled" v-model="c2Id" class="m-2" placeholder="请选择">
            <el-option v-for="item in CategoryStore.c2" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="三级分类">
          <el-select @change="changeC3" :disabled="disabled" v-model="c3Id" class="m-2" placeholder="请选择">
            <el-option v-for="item in CategoryStore.c3" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useCategoryStore } from '@/store/module/category'
import { ref } from 'vue'

defineProps({
  disabled: Boolean
})

const CategoryStore = useCategoryStore()

const c1Id = ref('')
const c2Id = ref('')
const c3Id = ref('')

// 改变c1
const changeC1 = (id: any) => {
  // 改变c1同时也要清空c2和c3
  c2Id.value = ''
  c3Id.value = ''
  CategoryStore.c2 = []
  CategoryStore.c2Id = ''
  CategoryStore.c3Id = ''
  CategoryStore.c3 = []
  CategoryStore.c1Id = id
  CategoryStore.get_c2_async()
}

// 改变c2
const changeC2 = (id: any) => {
  c3Id.value = ''
  CategoryStore.c3Id = ''
  CategoryStore.c3 = []
  CategoryStore.c2Id = id
  CategoryStore.get_c3_async()
}

// 改变c3
const changeC3 = (id: any) => {
  CategoryStore.c3Id = id
}
</script>

<style scoped></style>
